---
title: "code (highlighted) · RUAL Documentation"
description: "Source code with syntax highlighting. Renders server-side with no external library; supports nginx, javascript, json, bash, go, sql and yaml."
canonical: https://docs.rual.nl/block-types/state%20ui/state_code_highlight
language: en
---

# code (highlighted)

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v15.0.0`](https://docs.rual.nl/core-versions/150000).

Source code with syntax highlighting. Renders server-side with no external library; supports nginx, javascript, json, bash, go, sql and yaml.

- value required `value` The source code to display.

- value `value` Language to highlight as: nginx, javascript, json, bash, go, sql or yaml. Unknown or empty renders as plain text. • Hidden when unused

- value `value` Show line numbers down the left. Any truthy value. • Hidden when unused

- value `value` Lines to emphasise, e.g. "3,7-9". Ignored if unparseable. • Hidden when unused

- class `uiclass` Assigns a CSS class to the element. • Hidden when unused

- style `uistyle` Applies inline CSS style to the element • Hidden when unused

- attributes `uiattributes` Adds custom attributes to the element. • Hidden when unused

- state `state` Returns the element to the frontend state.

| `code highlight` |
| --- |
| `syntax highlight` |
| `highlighted code` |
| `snippet` |

[code](https://docs.rual.nl/block-types/state%20ui/state_code_highlight) takes the source as a value and the language as another, and renders it highlighted with optional line numbers. The value pin is where the code comes from, so it is just as happy with a fixed snippet as with a field read off a document: a docs page, a stored template, or the response an API call returned during a support session.

![Studio canvas example for the code (highlighted) block: rendering code on a page.](https://docs.rual.nl/canvas-examples/state_code_highlight.png)

### Version history

Introduced in [`v15.0.0`](https://docs.rual.nl/core-versions/150000).

- [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups

- [Back to `state elements`](https://docs.rual.nl/block-types/state%20ui?group=state%20elements): Return to the group to view all blocks within this group